<template>
  <view class="bg-white">
    <my-header bgColor="bg-white" :isBack="true">
      <block slot="content">员工档案详情</block>
    </my-header>
    <view class="employee-record-item">
      <view class="employee-record-card">
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">照片</view>
          <view class="employee-record-card-line-content">
            <image
              :src="basicInfo.avatar"
              class="avatar"
              @click="previewImage(basicInfo.avatar)"
            />
          </view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">userId</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.id
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">拥有者</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.realname || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">身份类别</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.identityCategory_dictText || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">姓名</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.realname || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">工号</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.workNo || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">性别</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.sex_dictText
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">出生年月</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.birthday || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label"
            >入职时间（进厂日期）</view
          >
          <view class="employee-record-card-line-content">{{
            basicInfo.enterFactoryTime || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">年龄</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.age || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">民族</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.nation || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">籍贯</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.nativePlace || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">联系电话</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.phone || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">身份证号</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.idCard || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">身份证有效期</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.idCardValidPeriod || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">党团员</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.partyAndLeagueMembers_dictText || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">学历</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.education_dictText || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">毕业院校</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.graduationInstitution || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">婚姻状况</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.maritalStatus_dictText || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">现住地址</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.currentAddress || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">员工状态</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.jobStatus_dictText || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">司龄时间</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.seniority
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">合同结束时间</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.contractEndTime || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">厂牌打印次数</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.printFactoryCardNum || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">备注</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.remark || "-"
          }}</view>
        </view>
      </view>
      <view class="employee-record-card-full">
        <view class="employee-record-card-full-content">
          <view>关联入职申请</view>
          <view
            class="employee-record-card-full-content-export-button"
            @click="toEmploymentApplicationDetails"
            >查看</view
          >
        </view>
      </view>
      <view class="employee-record-card-full">
        <view class="employee-record-card-full-content">
          <view>关联合同信息</view>
          <view
            class="employee-record-card-full-content-export-button"
            @click="toContractDetails"
            >查看</view
          >
        </view>
      </view>
      <view class="employee-record-card">
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">身份证信息正反面</view>
          <view class="employee-record-card-line-content">
            <image
              :src="basicInfo.idCardPhoto"
              class="avatar"
              @click="previewImage(basicInfo.idCardPhoto)"
            />
          </view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">荣誉/证书</view>
          <view class="employee-record-card-line-content">
            <div v-for="item in basicInfo.honors">
              <a>{{ item.honorFile.split("/").pop() }}</a>
            </div>
          </view>
        </view>
      </view>
      <view class="employee-record-card">
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">楼栋</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.buildingId_dictText || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">楼层</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.floorId_dictText || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">房间号</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.roomCode || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">房间类型</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.roomType_dictText || "-"
          }}</view>
        </view>
      </view>
      <view class="employee-record-card">
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">公司</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.company_dictText || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">部门</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.departIds_dictText || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">部门编码名称</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.departName || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">岗位</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.post || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">所在部门主管</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.departSupervisor_dictText || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">职务类型</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.postType_dictText || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">熟练程度</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.proficiency_dictText || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">熟练等级</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.proficiencyLevel_dictText || "-"
          }}</view>
        </view>
        <view class="employee-record-card-line">
          <view class="employee-record-card-line-label">计费标准</view>
          <view class="employee-record-card-line-content">{{
            basicInfo.freightBasis_dictText || "-"
          }}</view>
        </view>
      </view>
      <view class="employee-record-card" v-if="familyData.length > 0">
        <view class="header-title">家庭成员</view>
        <view
          v-for="(item, index) in familyData"
          :class="[
            'content-map',
            index === familyData.length - 1 ? 'mb-0' : '',
          ]"
          :key="item.id"
        >
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">与本人关系</view>
            <view class="employee-record-card-line-content">{{
              item.relationship || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">姓名</view>
            <view class="employee-record-card-line-content">{{
              item.name || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">电话</view>
            <view class="employee-record-card-line-content">{{
              item.phone || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">单位</view>
            <view class="employee-record-card-line-content">{{
              item.workUnit || "-"
            }}</view>
          </view>
        </view>
      </view>
      <view class="employee-record-card" v-if="resumeData.length > 0">
        <view class="header-title">进厂前工作经历</view>
        <view
          :class="[
            'content-map',
            index === resumeData.length - 1 ? 'mb-0' : '',
          ]"
          v-for="(item, index) in resumeData"
          :key="item.id"
        >
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">单位名称</view>
            <view class="employee-record-card-line-content">{{
              item.workUnit || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">开始时间</view>
            <view class="employee-record-card-line-content">{{
              item.startTime || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">结束时间</view>
            <view class="employee-record-card-line-content">{{
              item.endTime || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">职务</view>
            <view class="employee-record-card-line-content">{{
              item.post || "-"
            }}</view>
          </view>
        </view>
      </view>
      <view class="employee-record-card" v-if="ourCompanyReceivesRewards.length > 0">
        <view class="header-title">在本公司期间获得的荣誉及奖惩情况</view>
        <view
          v-for="(item, index) in ourCompanyReceivesRewards"
          :key="item.id"
          :class="[
            'content-map',
            index === ourCompanyReceivesRewards.length - 1 ? 'mb-0' : '',
          ]"
        >
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">奖/惩情况</view>
            <view class="employee-record-card-line-content">{{
              item.rewards || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">离职详情</view>
            <view class="employee-record-card-line-content">{{
              item.leaveReason || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">详情</view>
            <view class="employee-record-card-line-content">{{
              item.reason || "-"
            }}</view>
          </view>
        </view>
      </view>
      <view class="employee-record-card" v-if="accessTimes.length > 0">
        <view class="header-title">历次进出本厂时间</view>
        <view
          v-for="(item, index) in accessTimes"
          :key="item.id"
          :class="[
            'content-map',
            index === accessTimes.length - 1 ? 'mb-0' : '',
          ]"
        >
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">入职情况</view>
            <view class="employee-record-card-line-content">{{
              item.employmentSituation || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">离职详情</view>
            <view class="employee-record-card-line-content">{{
              item.resignationDetails || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">详情</view>
            <view class="employee-record-card-line-content">{{
              item.details || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">原因</view>
            <view class="employee-record-card-line-content">{{
              item.reason || "-"
            }}</view>
          </view>
        </view>
      </view>
      <view class="employee-record-card" v-if="otherMatters.length > 0">
        <view class="header-title">其他事项</view>
        <view
          v-for="(item, index) in otherMatters"
          :key="item.id"
          :class="[
            'content-map',
            index === otherMatters.length - 1 ? 'mb-0' : '',
          ]"
        >
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">说明</view>
            <view class="employee-record-card-line-content">{{
              item.reason || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">时间</view>
            <view class="employee-record-card-line-content">{{
              item.createTime || "-"
            }}</view>
          </view>
        </view>
      </view>
      <view class="employee-record-card" v-if="growthRecords.length > 0">
        <view class="header-title">在本公司的成长记录</view>
        <view
          v-for="(item, index) in growthRecords"
          :key="item.id"
          :class="[
            'content-map',
            index === growthRecords.length - 1 ? 'mb-0' : '',
          ]"
        >
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">时间</view>
            <view class="employee-record-card-line-content">{{
              item.createTime || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">原因</view>
            <view class="employee-record-card-line-content">{{
              item.reason || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">详情</view>
            <view class="employee-record-card-line-content">{{
              item.details || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">转正详情</view>
            <view class="employee-record-card-line-content">{{
              item.confirmationDetails || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">调岗详情</view>
            <view class="employee-record-card-line-content">{{
              item.jobTransferDetails || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">原部门</view>
            <view class="employee-record-card-line-content">{{
              item.oriOrgCodeTxt || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">原职务</view>
            <view class="employee-record-card-line-content">{{
              item.oriPost || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">现部门</view>
            <view class="employee-record-card-line-content">{{
              item.orgCodeTxt || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">现职务</view>
            <view class="employee-record-card-line-content">{{
              item.post || "-"
            }}</view>
          </view>
        </view>
      </view>
      <view class="employee-record-card" v-if="subPosts.length > 0">
        <view class="header-title">附属职务</view>
        <view
          v-for="(item, index) in subPosts"
          :key="item.id"
          :class="['content-map', index === subPosts.length - 1 ? 'mb-0' : '']"
        >
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">公司</view>
            <view class="employee-record-card-line-content">{{
              item.company || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">职务</view>
            <view class="employee-record-card-line-content">{{
              item.post || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">职务类别</view>
            <view class="employee-record-card-line-content">{{
              item.postType || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">计费标准</view>
            <view class="employee-record-card-line-content">{{
              item.freightBasis || "-"
            }}</view>
          </view>
          <view class="employee-record-card-line">
            <view class="employee-record-card-line-label">职务等级</view>
            <view class="employee-record-card-line-content">{{
              item.postLevel || "-"
            }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import configService from "@/common/service/config.service.js";
import myHeader from "../../../components/my-header/my-header.vue";

export default {
  components: {
    "my-header": myHeader,
  },
  data() {
    return {
      routerParams: {},
      basicInfo: {},
      familyData: [],
      resumeData: [],
      ourCompanyReceivesRewards: [],
      accessTimes: [],
      otherMatters: [],
      growthRecords: [],
      subPosts: [],
    };
  },
  onLoad: function (options) {
    this.routerParams = options;
  },
  created() {
    this.getDetailById();
  },
  methods: {
    getFileAccessHttpUrl(avatar, subStr) {
      if (!subStr) subStr = "http";
      if (avatar && avatar.startsWith(subStr)) {
        return avatar;
      } else {
        return configService.staticDomainURL + "/" + avatar;
      }
    },
    getUserInfo(id) {
      this.$http
        .get(`/sys/user/list`, {
          params: { id },
        })
        .then((res) => {
          const data = res?.data?.result?.records?.[0] || {};
          this.basicInfo = {
            ...data,
            avatar: this.getFileAccessHttpUrl(data?.avatar),
            idCardPhoto: this.getFileAccessHttpUrl(data?.idCardPhoto),
          };
        });
    },
    getFamilyData(id) {
      this.$http
        .get("/crm_family_members/crmFamilyMembers/list", {
          params: { userId: id },
        })
        .then((res) => {
          this.familyData = res?.data?.result?.records || [];
        });
    },
    getResumeData(id) {
      this.$http
        .get("/crm_resume/crmResume/list", {
          params: { userId: id },
        })
        .then((res) => {
          this.resumeData = res?.data?.result?.records || [];
        });
    },
    getOurCompanyReceivesRewards(id) {
      this.$http
        .get(
          "/crm_our_company_receives_rewards/crmOurCompanyReceivesRewards/list",
          {
            params: { userId: id },
          }
        )
        .then((res) => {
          this.ourCompanyReceivesRewards = res?.data?.result?.records || [];
        });
    },
    getAccessTimes(id) {
      this.$http
        .get("/crm_employment_access/crmEmploymentAccess/list", {
          params: { userId: id },
        })
        .then((res) => {
          this.accessTimes = res?.data?.result?.records || [];
        });
    },
    getOtherMatters(id) {
      this.$http
        .get("/crm_other_matters/crmOtherMatters/list", {
          params: { userId: id },
        })
        .then((res) => {
          this.otherMatters = res?.data?.result?.records || [];
        });
    },
    getGrowthRecords(id) {
      this.$http
        .get("/crm_growth_record/crmGrowthRecord/list", {
          params: { userId: id },
        })
        .then((res) => {
          this.growthRecords = res?.data?.result?.records || [];
        });
    },
    getSubPosts(id) {
      this.$http
        .get("/crm_sub_post/crmSubPost/list", {
          params: { userId: id },
        })
        .then((res) => {
          this.subPosts = res?.data?.result?.records || [];
        });
    },
    getDetailById() {
      const id = this.routerParams.id;
      this.getUserInfo(id);
      this.getFamilyData(id);
      this.getResumeData(id);
      this.getOurCompanyReceivesRewards(id);
      this.getAccessTimes(id);
      this.getOtherMatters(id);
      this.getGrowthRecords(id);
      this.getSubPosts(id);
    },
    toEmploymentApplicationDetails() {
      uni.navigateTo({
        url:
          "/pages/oa/crm_employment_list/employmentDetails/index?id=" +
          this.basicInfo.employmentApplicationId,
      });
    },
    toContractDetails() {
      uni.navigateTo({
        url:
          "/pages/contractList/contractListDetails/index?id=" +
          this.basicInfo.contractId,
      });
    },
    previewImage(imageUrl) {
      uni.previewImage({
        urls: [imageUrl],
      });
    },
  },
};
</script>

<style scoped lang="scss">
.employee-record-item {
  .employee-record-card {
    box-sizing: border-box;
    padding: 15px 20px;

    .header-title {
      font-family: PingFang TC, PingFang TC;
      font-weight: 500;
      font-size: 16px;
      color: #000000;
      margin-bottom: 8px;
    }

    .content-map {
      background: rgba(69, 145, 254, 0.04);
      box-sizing: border-box;
      padding: 16px;
      border-radius: 15px;
      margin-bottom: 16px;
    }

    &-line {
      display: flex;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      line-height: 12px;
      text-align: left;
      margin-bottom: 13px;

      &:last-child {
        margin-bottom: 0;
      }

      &-label {
        flex: 0 0 150px;
        color: #101317;
      }

      &-content {
        flex: 1;
        font-weight: 500;
        color: #18191b;

        .avatar {
          width: 80px;
          height: 100px;
        }
      }
    }
  }

  .employee-record-card-full {
    box-sizing: border-box;
    padding: 0 20px 15px;

    .employee-record-card-full-content {
      background: rgba(69, 145, 254, 0.1);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #101317;
      line-height: 1;
      box-sizing: border-box;
      padding: 7px 12px 9px 7px;

      .employee-record-card-full-content-export-button {
        width: 51px;
        height: 33px;
        background: #4591fe;
        border-radius: 30px;
        text-align: center;
        line-height: 33px;
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
      }
    }
  }
}

.mb-0 {
  margin-bottom: 0 !important;
}
</style>
